import { Form, message, Modal, Select } from "antd";
import React, { useEffect } from "react";
import {
  addQuestionBankQuestionUsingPost,
  listQuestionBankQuestionVoByPageUsingPost,
  removeQuestionBankQuestionUsingPost,
} from "@/api/questionBankQuestionController";
import { listQuestionBankVoByPageUsingPost } from "@/api/questionBankController";

interface Props {
  questionId?: number;
  visible: boolean;
  onCancel: () => void;
}

/**
 * 更新所属题库弹窗弹窗
 * @param props
 * @constructor
 */
const UpdateBankModal: React.FC<Props> = (props) => {
  const { questionId, visible, onCancel } = props;
  const [form] = Form.useForm();
  const [questionBankList, setQuestionBankList] = React.useState<
    API.QuestionBankVO[]
  >([]);

  /**
   * 获取该题目所属题库列表
   *
   * @param fields
   */
  const getCurrentQuestionBankIDList = async () => {
    try {
      const res = await listQuestionBankQuestionVoByPageUsingPost({
        questionId,
        pageSize: 20,
      });
      form.setFieldValue(
        "questionBankIdList",
        (res.data.records ?? []).map((item) => item.questionBankId),
      );
    } catch (error: any) {
      message.error("获取题目所属列表失败，" + error.message);
      return false;
    }
  };

  //  这里要加 deps，否则只会执行一次
  useEffect(() => {
    if (questionId) {
      getCurrentQuestionBankIDList();
    }
  }, [questionId]);

  /**
   * 获取全部题库列表
   */

  const getAllQuestionBankIDList = async () => {
    try {
      const res = await listQuestionBankVoByPageUsingPost({
        pageSize: 200,
        sortField: "createTime",
        sortOrder: "descend",
      });
      setQuestionBankList(res.data.records ?? []);
    } catch (error: any) {
      message.error("获取全部题库失败，" + error.message);
      return false;
    }
  };

  useEffect(() => {
    getAllQuestionBankIDList();
  }, []);

  return (
    <Modal
      destroyOnClose
      title={"更新所属题库"}
      open={visible}
      footer={null}
      onCancel={() => {
        onCancel?.();
      }}
    >
      <Form form={form} style={{ marginTop: 24 }}>
        <Form.Item label={"所属题库"} name={"questionBankIdList"}>
          <Select
            mode="multiple" //  允许多选
            style={{ width: "100%" }}
            // placeholder="Please select"
            // onChange={onCancel}
            //  默认可选项
            options={questionBankList.map((item) => {
              return {
                value: item.id, //后端接收
                label: item.title, //页面选中
              };
            })}
            onSelect={async (value) => {
              const hide = message.loading("绑定题库中...");
              try {
                await addQuestionBankQuestionUsingPost({
                  questionId,
                  questionBankId: value,
                });
                message.success("绑定题库成功");
                hide();
              } catch (e: any) {}
              hide();
              message.error("绑定题库失败，" + e.message);
            }}
            onDeselect={async (value) => {
              const hide = message.loading("取消绑定题库中...");
              try {
                await removeQuestionBankQuestionUsingPost({
                  questionId,
                  questionBankId: value,
                });
                message.success("取消绑定题库成功");
                hide();
              } catch (e: any) {}
              hide();
              message.error("取消绑定题库失败，" + e.message);
            }}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default UpdateBankModal;
